<template>
  <basic-container :btnFlag=true>
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>
      <div style="float: right;margin:19px 12px 9px 0px">
        <el-button type="primary" size="mini" @click="subjectOpinionBack()" v-if="toDoOrnotControl=='0'">添加</el-button>
      </div>
      <avue-crud :data="subjectOpinionListData"
                 :option="tableoption"
                 :table-loading="tableLoading"
                 @size-change="sizeChange"
                 @current-change="currentChange"
                 @on-load="getResultList">
        <template slot-scope="scope" slot="menu">
          <div class="menu-title" @click.stop="deleteSubjectOpinion(scope.row,scope.index)" v-if="toDoOrnotControl=='0'">
            <i class="iconfont iconalter icon-warning"></i>
            <p class="menu-title-text">删除</p>
          </div>
        </template>
      </avue-crud>
      <div style="text-align: center;margin-top: 20px">
        <el-button type="warning" @click="subjectOpinionBackFinish()" v-if="toDoOrnotControl=='0'">提 交</el-button>
        <el-button @click="goBack()" v-if="toDoOrnotControl=='0'">关 闭</el-button>
      </div>

      <el-collapse v-model="activeNames" style="margin-top:2rem;">
        <el-collapse-item name="targetLog">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">转办信息</div>
            </div>
          </template>
          <div>
            <target-log-for-current-user :targetId="Number(targetId)"></target-log-for-current-user>
          </div>
        </el-collapse-item>
        <el-collapse-item name="1">
          <template slot="title">
            <div class="card-header collapse-header">
              <div class="head-title collapse-title">课题征集信息</div>
            </div>
          </template>
          <div>
            <opinion-detail :opinionId="$route.params.id"></opinion-detail>
          </div>
        </el-collapse-item>
      </el-collapse>
      <el-dialog title="课题征集反馈" :visible.sync="opinionFormVisible" width="70%">
        <el-form
          label-width="130px"
          :model="opinionForm"
          style="padding-right: 30px;"
          :rules="subjectCollectionRules"
          ref="opinionForm"
        >
          <el-row>
            <el-col :span="18" style="margin-top: 27px">
              <el-form-item class="form-item-release" label="课题名称 :" prop="title">
                <el-input
                  v-model="opinionForm.title"
                  placeholder="请输入课题名称"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="18">
              <el-form-item class="form-item-release" label="选题理由 :" prop="reason">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 4}"
                  placeholder="请输入选题理由"
                  v-model="opinionForm.reason"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="18">
              <el-form-item class="form-item-release" label="重点研究内容 :" prop="important">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 4, maxRows: 4}"
                  placeholder="请输入重点研究内容"
                  v-model="opinionForm.important"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item class="form-item-release" label="联系人 :" prop="contactName">
                <el-input
                  v-model="opinionForm.contactName"
                  placeholder="请输入联系人"
                  style="width: 280px"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item class="form-item-release" label="联系电话 :" prop="contactNumber">
                <el-input
                  v-model="opinionForm.contactNumber"
                  placeholder="请输入联系电话"
                  style="width: 280px"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="form-group-file" style="margin-top:12px;">
          <span class="form-label-file">相关材料:</span>
          <el-upload
            style="margin-top: 6px;margin-left: 70px;"
            class="upload-demo"
            ref="uploadrelated"
            action="string"
            :http-request="submitUploadMixin"
            :on-preview="handlePreviewMixin"
            :on-remove="handleRemoveMixin"
            :file-list="fileListMixin"
            :auto-upload="true"
            :on-change="fileChangeMixin">
            <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">上传工作方案、工作计划等相关材料</div>
          </el-upload>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="updateForm()">确 定</el-button>
          <el-button @click="opinionFormVisible=false">取 消</el-button>
        </div>
      </el-dialog>
      <el-dialog title="附件详情" :visible.sync="viewFilesVisible" width="70%">
        <table class="bs-table">
          <tr class="bs-table_row">
            <th class="bs-table_th" style="width: 200px">课题名称</th>
            <td class="bs-table_td" colspan="3">{{subjectOpinionDetail.title}}</td>
          </tr>
          <tr class="bs-table_row">
            <th class="bs-table_th" style="width: 200px">选题理由</th>
            <td class="bs-table_td" colspan="3">{{subjectOpinionDetail.reason}}</td>
          </tr>
          <tr class="bs-table_row">
            <th class="bs-table_th" style="width: 200px">重点研究内容</th>
            <td class="bs-table_td" colspan="3">{{subjectOpinionDetail.important}}</td>
          </tr>
          <tr class="bs-table_row">
            <th class="bs-table_th" style="width: 200px">联系人</th>
            <td class="bs-table_td">{{subjectOpinionDetail.contactName}}</td>
            <th class="bs-table_th" style="width: 200px">联系电话</th>
            <td class="bs-table_td">{{subjectOpinionDetail.contactNumber}}</td>
          </tr>
          <tr class="bs-table_row">
            <th class="bs-table_th" style="width:200px;">相关附件</th>
            <td class="bs-table_td" colspan="3">
              <div v-for="item in subjectOpinionDetail.files" :key="item">
                <el-link :href="'/planning/file/download/'+item.fileId" type="danger"
                >{{item.fileName}}
                </el-link>
              </div>
            </td>
          </tr>
        </table>
        <div slot="footer" class="dialog-footer">
          <el-button @click="viewFilesVisible=false">关 闭</el-button>
        </div>
      </el-dialog>
    </div>
  </basic-container>
</template>

<script>
  import fileTypeMixin from "@/mixins/fileTypeMixin";
  import opinionDetail from "@/components/opinion/detail";
  import {getSubjectOpinBackList, subjectOpinionBackFinish} from "@/api/subject";
  import {formOpinion,collectionFormOpinion,getFormDetail,deleteSubjectOpinion} from "@/api/opinion";
  import relatedfile from "@/mixins/relatedfile";
  import {getFileTypeFiles} from '@/views/util'

  //转办信息
  import targetLogForCurrentUser from "@/components/opinion/targetLogForCurrentUser.vue";


  export default {
    name: "subjectCollectionBack",
    mixins: [relatedfile,fileTypeMixin],
    components: {
      opinionDetail,
      targetLogForCurrentUser
    },
    created() {
      window.viewFiles = this.viewFiles;
      if(this.$route.query.toDoOrnot!=undefined){
        this.toDoOrnotControl = this.$route.query.toDoOrnot;
      }
      this.targetId = this.$route.query.targetId;
    },
    data() {
      return {
        targetId: null,
        headerData: {
          title: '课题征集反馈'
        },
        typeControlDetail: '',
        toDoOrnotControl:'1',
        activeNames: ['1', 'targetLog'],
        subjectOpinionListData: [],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        tableLoading: false,
        tableoption: {
          page: false,
          menuWidth: 100,
          addBtn: false,
          editBtn: false,
          addRowBtn: false,
          indexLabel: "序号",
          index: false,
          indexWidth:70,
          cellBtn: false,
          delBtn: false,
          columnBtn: false,
          refreshBtn: false,
          filterBtn: false,
          searchBtn: false,
          menu:true,
          keyId: "id",
          column: [
            {
              label: "课题名称",
              prop: "title",
              overHidden:true,
              formatter: function (row, value, label, column) {
                return '<a style="cursor: pointer;" onclick="viewFiles(\'' + row.formId + '\')">' + value + '</a>';
              },
              cell: true
            },
            {
              label: "选题理由",
              prop: "reason",
              overHidden:true,
              cell: true
            },
            {
              label: "重点研究内容",
              prop: "important",
              overHidden:true,
              cell: true,
            },
            {
              label: "状态",
              prop: "adopt",
              cell: true,
              width:80,
              formatter: function (row, value, label, column) {
                if(row.adopt==null){
                  if(this.toDoOrnotControl=='0'){
                    return '暂存';
                  }else {
                    return '已提交';
                  }
                }else if(row.adopt==true){
                  return '已采纳';
                }else if(row.adopt==false){
                  return '不采纳';
                }
              },
            },
          ]
        },
        opinionForm: {
          title: '',
          reason: '',
          important: '',
          contactNumber: '',
          contactName: '',
        },
        subjectCollectionRules: {
          title: [
            {required: true, message: "请输入课题名称", trigger: "blur"}
          ],
          reason: [
            {required: true, message: "请输入选题理由", trigger: "blur"}
          ],
          important: [
            {required: true, message: "请输入重点研究内容", trigger: "blur"}
          ],
          contactName: [
            {required: true, message: "请输入联系人", trigger: "blur"}
          ],
          contactNumber: [
            {required: true, message: "请输入联系电话", trigger: "blur"}
          ],
        },
        opinionFormVisible:false,
        viewFilesVisible:false,
        subjectOpinionDetail:{
          title: '',
          reason: '',
          important: '',
          contactNumber: '',
          contactName: '',
          files:[],
        }


      }
    },
    methods: {
       viewFiles(formId){
         this.viewFilesVisible = true;
        getFormDetail(formId).then(async response =>{
           this.subjectOpinionDetail =response.data.data;
           if(response.data.data.fileIds.length>0){
            let files = await getFileTypeFiles(response.data.data.fileIds);
            this.subjectOpinionDetail.files = files;
          }
        })

      },
      // 删除
      deleteSubjectOpinion(row, index) {
        this.$confirm("确定要删除吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          // 提交代码
          deleteSubjectOpinion(row.formId).then(response => {
            if (response.data.code == '0') {
              this.$message({
                message: '删除成功！',
                type: 'success'
              });
              this.getResultListPage(this.page)
            }
          })
        });
      },
      subjectOpinionBack(){
        this.opinionForm.title = '';
        this.opinionForm.reason = '';
        this.opinionForm.important = '';
        this.opinionForm.contactNumber = '';
        this.opinionForm.contactName = '';
        this.opinionForm.fileIds = [];
        this.fileListMixin = [];

        this.opinionFormVisible = true;
      },
      goBack(){
        this.$router.go(-1)
      },
      // 提交反馈课题
      updateForm() {
        this.$refs.opinionForm.validate(valid => {
          if (valid) {
              //将多个相关材料的附件id拼成逗号隔开的字符串放在 this.projectForm.fileId 中
              var arr = [];
              for (var item in this.fileListMixin) {
                arr.push(this.fileListMixin[item].url);
              }
              this.opinionForm.fileIds = arr;
              this.opinionForm.targetId = this.$route.query.targetId;
              collectionFormOpinion(this.opinionForm).then(response => {
                if (response.data.code == 0) {
                  this.$notify({
                    title: '成功',
                    message: '提交成功',
                    type: 'success',
                    duration: 2000
                  });
                  this.opinionFormVisible = false;
                  this.getResultListPage(this.page);
                }
              })

          }
        })
      },
      getResultList(page) {
        formOpinion(Object.assign({
          opinionId: this.$route.params.id,
          targetId: this.$route.query.targetId,
        })).then(response => {
          this.subjectOpinionListData = response.data.data.records;
          this.page.total = response.data.data.total;
        })
      },
      currentChange(currentPage) {
        var page = this.page;
        page.currentPage = currentPage;
        this.getResultListPage(page);
      },
      sizeChange(pageSize) {
        var page = this.page;
        page.pageSize = pageSize;
        this.getResultListPage(page);
      },
      getResultListPage(page){
        formOpinion(Object.assign({
          current: page.currentPage,
          size: -1,
          opinionId: this.$route.params.id,
          targetId: this.$route.query.targetId,
        })).then(async response => {
          this.subjectOpinionListData = response.data.data.records;
          this.page.total = response.data.data.total;
        });
      },
      subjectOpinionBackFinish() {
        if (this.subjectOpinionListData.length > 0) {
          this.$confirm("确定反馈完成吗?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            subjectOpinionBackFinish(this.$route.query.targetId).then(response => {
              if (response.data.code == '0') {
                this.$message({
                  message: '办理成功！',
                  type: 'success'
                });
                this.$router.go(-1)
              }
            })
          })
        } else {
          this.$notify({
            title: "提醒",
            type: "warning",
            message: "请反馈课题",
            duration: 2000
          });

        }
      }

    },
  }
</script>

<style lang="scss" scoped>

</style>


